<template>
    <div class="topup-box">
        <nav-bar title="常见问题" fixed='fixed' />
        <van-pull-refresh v-model="isLoading" @refresh="onLoad(true)">
            <div class="content">
                <div class="item" v-for="(item, key) in list" :key="key" @click="goRoter(item.id)">
                    <div class="mark">{{key+1}},</div>
                    <div class="title">{{item.title}}</div>
                </div>
            </div>
        </van-pull-refresh>
    </div>
</template>
<script>
export default {
  name: 'questionList',
  data() {
    return {
      list: [],
      isLoading: false
    };
  },
  created() {
    this.onLoad();
  },
  mounted() {},
  methods: {
    goRoter(id) {
      this.$router.push({
        path: '/questionDetails?id=' + id
      });
    },
    onLoad(isRefresh) {
      this.$API.global.getQuestionList({}).then(res => {
        if (!res.code) {
          if (isRefresh) {
            this.list = [];
          }
          this.list = res.data;
        }
      }).finally(() => {
        setTimeout(() => {
          this.$set(this, 'isLoading', false);
        }, 500);
      });
    }
  }
};
</script>
<style lang="less" scoped>
     .van-pull-refresh {
        min-height: 100%;
    }

    .content {
        background: #ffffff;

        .item {
            height: 100px;
            display: flex;
            padding-left: 30px;
            font-size: 32px;
            color: #212121;

            .mark {
                height: 100%;
                display: flex;
                align-items: center;
                flex-shrink: 0;
            }

            .title {
                height: 100%;
                flex: 1;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #ebebeb;
                padding-right: 100px;
                margin-left: 8px;
                background: url('../../assets/images/icon-arrow-right.png') 96% center no-repeat;
                background-size: 18px auto;
            }
        }

        .item:nth-last-child(1) {
            .title {
                border: none;
            }
        }
    }
</style>
